<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Tennis Camp</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="js/slides.min.jquery.js"></script>
        <script>
            $(function(){
                $('#slides').slides({
                    preload: true,
                    preloadImage: 'img/loading.gif',
                    play: 5000,
                    pause: 2500,
                    hoverPause: true,
                    animationStart: function(current){
                        $('.caption').animate({
                            bottom:-35
                        },100);
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationStart on slide: ', current);
                        };
                    },
                    animationComplete: function(current){
                        $('.caption').animate({
                            bottom:0
                        },200);
                        if (window.console && console.log) {
                            // example return of current slide number
                            console.log('animationComplete on slide: ', current);
                        };
                    },
                    slidesLoaded: function() {
                        $('.caption').animate({
                            bottom:0
                        },200);
                    }
                });
            }); 
        </script>
    </head>

    <body>

        <div id="overall_box">

            <div id="header">
                <div id="camp">
                    <div id="logo_cont"> 
                        <font class="logo">TENNIS</font> 
                        <br /> 
                        <font class="logo1">Slogan goes here</font> 
                    </div>
                    <div class="tollfree_cont">
                        <iframe id="fblike" src="http://www.facebook.com/plugins/like.php?href=http://www.facebook.com/pathofexile&send=false&layout=button_count&width=450&show_faces=false&font&colorscheme=light&action=like&height=90" scrolling="no" frameborder="1" allowTransparency="true"></iframe>
                        <p class="tollfree">000-000-0000</p>
                    </div>

                </div>

                <div id="navigation">
                    <ul>
                        <li class="first_selected"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About us</a></li>
                        <li><a href="people.html">People</a></li>
                        <li><a href="programs.html">Programs</a></li>
                        <li><a href="testimonials.html">Testimonials</a></li>
                        <li><a href="contact.html">Contact us</a></li>
                    </ul>
                </div> 
            </div> 

            <div id="main_content">

                <div id="s_container">
                    <div id="example">
                        <div id="slides">
                            <div class="slides_container">
                                <div class="slide">
                                    <a href="" title=""><img src="img/slide_1.jpg" width="760" height="204" alt="Slide 1"></a>
                                    <div class="caption" style="bottom:0">
                                        <p>Picture 1</p>
                                    </div>
                                </div>
                                <div class="slide">
                                    <a href="" title=""><img src="img/slide_2.jpg" width="760" height="204" alt="Slide 2"></a>
                                    <div class="caption">
                                        <p>Picture 2</p>
                                    </div>
                                </div>
                                <div class="slide">
                                    <a href="" title=""><img src="img/slide_3.jpg" width="760" height="204" alt="Slide 3"></a>
                                    <div class="caption">
                                        <p>Picture 3</p>
                                    </div>
                                </div>
                                <div class="slide">
                                    <a href="" title=""><img src="img/slide_4.jpg" width="760" height="204" alt="Slide 4"></a>
                                    <div class="caption">
                                        <p>Picture 4</p>
                                    </div>
                                </div>
                            </div>
                            <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
                            <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
                        </div> <!-- slides -->
                    </div> <!-- example -->
                </div>  <!-- s_container -->





                <div id="sidebar1">
                    <p><img src="img/sidepic.jpg" /></p>
                    <p>I am the side bar. Yes a side bar. side side side side side side side side side side side side side side side side side side side side side side side side side side side side <br />
                    <br />
                    More side bar yeah! more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side more side . </p>
                    <!-- / #sidebar1 -->
                </div>

                <div id="sidebar2">
                    <div class="top_cont">
                        <h1> welcome </h1>
                        <p>You are welcome. Yes you are! We welcome you here. Here, you are welcome. welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome welcome </p>
                        <p> More welcome! happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy happy </p>
                    </div>
                    <div class="left_cont">
                        <h2>Left column </h2>
                        <p> This is the left column. That's right. It is left. left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left left. <br />
                        <br />
                        More right more right more right more right more right more right more right more right more right more right more right more right more right more right more right more right more right .</p>
                    </div>
                    <div class="right_cont">
                        <h2>Right column </h2>
                        <p>This is the right column. That's right. It is right. right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right. <br />
                        <br />
                        right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right right. </p>
                    </div>
                </div> <!-- sidebar2 -->






            </div> <!-- main_content -->


            <div id="footer">
                <ul class="contacts">
                    <h3>Contact Us</h3>
                    <li><span>Email</span><p>: your_name@email.com</p></li>
                    <li><span>Address</span><p>: Your Address</p></li>
                    <li><span>Phone</span><p>: 000-000-0000</p></li>
                </ul>
                <ul class="connect">
                    <h3>Get Updated</h3>
                    <li><a href="http://www.facebook.com" target="_blank">Facebook</a></li>
                    <li><a href="http://www.twitter.com" target="_blank">Twitter</a></li>
                    <li><a href="http://www.youtube.com" target="_blank">YouTube</a></li>
                </ul>
                <br />
            </div>

            <div id="copyright">
                <p>Your disclaimer and copyright information here. Copyright &#169; 2013</p>
            </div>

        </div>  <!-- overall_box -->
    </body>
</html>

